<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人中心</title>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<!--  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">-->
  <link href="asserts/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
  <script src="asserts/js/jquery-2.1.1.min.js"></script>
<!--  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>-->
  <script src="asserts/bootstrap/js/bootstrap.min.js"></script>
  <!--线上 validator 校验 js 文件-->
<!--  <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>-->
  <!--线上支持中文校验 js 文件-->
<!--  <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/language/zh_CN.js"></script>-->
  <!--  线上vue.js文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--   3. 引入ElementUI组件 -->
  <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>

<!--  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
  <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
<!--  <script src="asserts/js/vue.js"></script>-->
<!--  <script src="asserts/js/index.js"></script>-->
<!--  <link rel="stylesheet" href="asserts/css/index.css">-->

</head>
<style>
  .navbar-inverse{
    height: 35px;
    font-size: 6px;
  }
  #a2{
    padding-top: 7px;
    margin-top: 0px;
    padding-right:0px;
    color: #eb9e9b
  }
  #a2:hover{
    color: #eb565f;
  }
  #div1{
    /*border: red solid 1px;*/
    height: 80px;
    width: 910px;
    margin-left: 192px;
    margin-top: 10px;
  }
  #div2{
    overflow: hidden;
    /*border: red solid 1px;*/
    float: left;
    height: 80px;
    width: 150px
  }
  #div3{
    /*border: red solid 1px;*/
    float: left;
    margin-left: 20px;
    font-size: 18px;
    height: 80px;
    width: 350px;
    font-weight:500;
    color: #4a4a4a;
    padding-top: 25px;
    font-family:微软雅黑;
  }
  .span1{
    /* 鼠标移入变小手 */
    cursor: pointer;

  }
  .span1:hover{
    font-weight: bold;
  }
  .form-group{
    /*border: red solid 1px;*/
    height: 80px;
    width: 300px;
    padding-top: 22px;
    float: right;
    color: #FFFFFF;

  }
  #button_id{
    float: right;
    width: 70px;
    height: 34px;
    background-color: #ff6e39;
    border: 0px;
    border-radius: 4px;
    box-shadow: 0px 0px 5px #888888;
  }


  #content_body{
    background:#f5f5f5;
  }

  /*个人中心页面的样式*/
  #content_div{
    width: 70%;
    height: 700px;
    margin: 0 auto;
    /*border: 1px solid red;*/
  }

  #div_left{
    float: left;
    width: 20%;
    /*border: 1px solid greenyellow;*/
    height: 600px;
    padding-left:40px;
    background:#FFF
  }

  #div_right{
    float: left;
    width: 70%;
    /*border: 1px solid blue;*/
    height: 600px;
    margin-left: 30px;
    background:#FFF;
    margin-top: -15px;
    /*overflow: scroll;*/
  }

  .left_font{
    line-height:45px;
    font-size:16px;
    cursor: pointer;
    text-decoration: none;
  }

  .hidden_div{
    display: none;
  }

  .show_div{
    display: block;
  }

  .fakeImage green{
    display: block;
    height: 40px;
    font-size: 22px;
    line-height: 30px;
    color: #000;
  }

  a{
    cursor: pointer;
    text-decoration: none;
  }

  .typeClass{
    margin-left: 10px;
  }


  /**根据商品类型展示商品样式*/
  .div6_1{
    /*border: red solid 1px;*/
    border-top: #ff6e39 solid 2px;
    /*background-color: #fafafa;*/
    float: left;
    width: 200px;
    height: 300px;
    margin-left: 13px;
    margin-right: 13px;
    margin-bottom: 10px;
  }
  .div6_1:hover{
    transform: scale(1.02);
  }

  .div5{
    /*border: red solid 1px;*/
    height: 50px;
    width: 150px;
    margin-left: 190px;
    font-size: 19px;
    padding-top: 12px;
  }
  .div6{
    margin-left: 190px;
    /*border: red solid 1px;*/
    width: 910px;
    height: 325px;
    /* 鼠标移入变小手 */
    cursor: pointer;
  }

   .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
   }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .pay_div{
    border: #5bc0de 1px solid;
  }

</style>
<body>
<div id="app">
  <nav class=" navbar-inverse">
    <div class="container-fluid" >
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class=""><a href="./userIndex4.html" style="padding-top: 0px;margin-top: 7px;margin-left: 150px">淘贝首页</a></li>
          <li><a href="#" style="padding-top: 0px;margin-top: 7px">问题反馈</a></li>
          <li><a href="./store/index.html" style="padding-top: 0px;margin-top: 7px">卖家中心</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"   style="padding-top: 7px;margin-top: 0px;height: 35px;">商品分类 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">数码电子</a></li>
              <li><a href="#">食品</a></li>
              <li><a href="#">生活用品</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">服装 | 男装 | 女装</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">厨具用品</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#" v-if="user == null" @click="loginVisible = true"  class="a2" data-toggle="modal" data-target="#exampleModal" style="padding-top: 7px;">亲，请登录</a>
            <a href="#" v-else @click="toInfo"  class="a2" data-toggle="modal" style="padding-top: 7px;" data-target="#exampleModal">欢迎您，{{user.username}}</a>
          </li>
          <li>
            <a v-if="user == null" href="./register.html" style="padding-top: 7px;margin-top: 0px;">注册</a>
            <a v-else @click="logout" style="padding-top: 7px;margin-top: 0px;cursor: pointer">注销</a>
          </li>
          <li><a href="#"  @click="cartBtn" style="padding-top: 7px;margin-top: 0px;height: 35px;margin-right: 150px">购物车<span style="color: #eb9e9b">({{cartNumber}})</span></a>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

  <div id="div1">
    <div id="div2">
      <a href="userIndex4.html">
        <img src="asscerts/img/taobeilogo.jpg" style="height: 250px;margin-top: -85px;margin-left: -30px">
      </a>
    </div>
    <div id="div3">
      <!-- 遍历展示类型 -->
      <span v-for="(item,index) in viewProductList" :class="{typeClass:index!=0}" @click="getProductListByTypeId(item)" class="span1">{{item.name}}</span>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" style="width: 220px;float: left" placeholder="幸福生活，搜索一下" name="username" id="username">
      <input id="button_id" type="button" value="搜索" style="">
    </div>
  </div>

  <!-- 当用户点击商品类型时显示对应商品类型下的所有商品 -->
  <div :class="[showFlag==1?'show_div':'hidden_div']">
    <div class="div5">
      <span>{{viewProductType.name}}  ></span>
    </div>
    <div class="div6">
      <div class="div6_1" v-for="(item,index) in viewProductType.productList" @click="addProductId(item)">
        <div>
          <el-image :src="item.url" style="width: 200px"></el-image>
        </div>
        <div style="text-align: center; margin-top: -8px;font-size: 15px">{{item.name}}</div>
        <div style="text-align: center;font-size: 10px;color: #88868d;margin-top: 5px"><p style="margin-bottom: 0;height: 25px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.context}}</p></div>
        <div style="color: red;font-size: 15px;text-align: center">{{item.price}}</div>
      </div>
    </div>
  </div>


  <div id="content_body" :class="[showFlag==0?'show_div':'hidden_div']">
    <div id="content_div">
      <div id="div_left">
        <a class="left_font" @click="setTab(0)">收货地址</a><br/>
        <a class="left_font" @click="setTab(1)">基本资料</a><br/>
        <a class="left_font" @click="setTab(2)">优惠券</a><br/>
        <a class="left_font" @click="setTab(3)">订单管理</a><br/>
        <a class="left_font" @click="setTab(4)">安全中心</a><br/>
        <!--      <a v-for="(item,index) in nav" @click="setTab(index)" class="left_font">{{item}}</a>-->
      </div>
      <div id="div_right" style="height: 600px">
        <!-- 收货地址div -->
        <div id="options0" :class="[index==0?'show_div':'hidden_div']">
          <div style="height: 300px;overflow: scroll">
            <el-table
                    v-loading="loading"
                    :data="allAddress"
                    style="width: 100%"
            >
              <el-table-column
                      type="index"
                      width="50"
                      label="序号"
                      align="center"
              >
              </el-table-column>
              <el-table-column
                      prop="name"
                      label="收货人"
                      width="100"
                      align="center"
              >
              </el-table-column>
              <el-table-column
                      prop="address"
                      label="收货地址"
                      width="240"
                      align="center"
              >
              </el-table-column>
              <el-table-column
                      prop="tel"
                      label="电话"
                      width="120"
                      align="center"
              >
              </el-table-column>
              <el-table-column
                      label="操作"
                      align="center"
              >
                <template slot-scope="scope">
                  <el-button @click="delAddr(scope.row)" icon="el-icon-delete" type="danger" size="mini">删 除</el-button>
                  <el-button @click="showAddr(scope.row)" icon="el-icon-edit" size="mini">编 辑</el-button>
                  <el-button v-if="scope.row.flag == 0" icon="el-icon-star-on" size="mini">默认地址</el-button>
                  <el-button @click="setDefault(scope.row)" v-else icon="el-icon-star-off" size="mini">设为默认</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div>
            <el-form ref="newAddress" :model="newAddress" :rules="addressRule" label-width="80px">
              <el-form-item prop="name" label="收货人">
                <el-input v-model="newAddress.name" style="width:200px"></el-input>
              </el-form-item>
              <el-form-item prop="tel" label="手机号">
                <el-input v-model="newAddress.tel" style="width:200px"></el-input>
              </el-form-item>
              <el-form-item prop="address" label="地址">
                <el-input v-model="newAddress.address"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addAddress">添 加</el-button>
                <el-button>重 置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>


        <!-- 个人信息 -->
        <div id="options1" :class="[index==1?'show_div':'hidden_div']">
          <h2>基本资料</h2>
          <!-- 显示头像 -->
          <div style="height: 120px;padding-left: 60px">
            <div @click="editImgVisible = true" style="width: 100px; height: 100px;cursor: pointer;float: left">
              <el-image
                      style="width: 100px; height: 100px;border-radius:50%;cursor: pointer"
                      :src="user.imgUrl"
                      :fit="fit"
              ></el-image>
            </div>
            <!-- 展示余额 -->
            <div style="float: left;margin-left:100px;width:400px;height: 100px">
              <span style="font-size: 30px;">余额：{{user.account}}</span>
              <el-button @click="rechargeVisible = true">充值</el-button>
            </div>
          </div>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <!-- 显示基本资料表单 -->
          <div>
            <el-form :model="userInfo" :rules="usernameRule" ref="userInfo" label-width="100px" class="demo-ruleForm">
              <el-form-item label="昵称" prop="username">
                <el-input v-model="userInfo.username" style="width: 30%"></el-input>
              </el-form-item>
              <el-form-item prop="sex" label="性别">
                <el-radio v-model="userInfo.sex" label="男">男</el-radio>
                <el-radio v-model="userInfo.sex" label="女">女</el-radio>
              </el-form-item>
              <el-form-item label="手机号" prop="tel">
                <el-input v-model="userInfo.tel" readonly style="width: 30%"></el-input><a @click="editTelVisible = true">修改</a>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input readonly v-model="userInfo.email" style="width: 30%"></el-input><a @click="editEmailVisible = true">修改</a>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

        </div>

        <!-- 优惠券 -->
        <div id="options2" :class="[index==2?'show_div':'hidden_div']">
          <h2>优惠券</h2>
          <el-tabs v-model="discountActive" @tab-click="disHandleClick">
            <el-tab-pane label="未使用" name="first">
              <el-table
                      :data="discounts"
                      style="width: 100%">
                <el-table-column
                        prop="name"
                        label="额度丨明细"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="product.name"
                        label="适用范围"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="releaseTime"
                        label="有效期">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="已使用" name="second">
              <el-table
                      :data="discounts"
                      style="width: 100%">
                <el-table-column
                        prop="name"
                        label="额度丨明细"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="product.name"
                        label="适用范围"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="releaseTime"
                        label="有效期">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="已过期" name="third">
              <el-table
                      :data="discounts"
                      style="width: 100%">
                <el-table-column
                        prop="name"
                        label="额度丨明细"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="product.name"
                        label="适用范围"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="releaseTime"
                        label="有效期">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 订单管理 -->
        <div id="options3" :class="[index==3?'show_div':'hidden_div']">
          <h2>订单管理</h2>
          <el-tabs v-model="activeName" @tab-click="orderHandlerClick">
            <el-tab-pane label="全部订单" name="first">
              <el-table
                      :data="orderTable"
                      style="width: 100%">
                <el-table-column
                        prop="orderNumber"
                        label="订单编号"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="订单时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="recipient"
                        label="收货人">
                </el-table-column>
                <el-table-column
                        prop="totalPrice"
                        label="金额"
                        width="80">
                </el-table-column>
                <el-table-column
                        label="操作"

                >
                  <template slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-view"
                            @click="orderDetailsBtn(scope.row)"
                    >详情</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            @click="delOrder(scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="待付款" name="second">
              <el-table
                      :data="orderTable"
                      style="width: 100%">
                <el-table-column
                        prop="orderNumber"
                        label="订单编号"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="订单时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="recipient"
                        label="收货人">
                </el-table-column>
                <el-table-column
                        prop="totalPrice"
                        label="金额"
                        width="80">
                </el-table-column>
                <el-table-column
                        label="操作">
                  <template slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-view"
                            @click="orderDetailsBtn(scope.row)"
                    >详情</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            @click="delOrder(scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="待发货" name="third">
              <el-table
                      :data="orderTable"
                      style="width: 100%">
                <el-table-column
                        prop="orderNumber"
                        label="订单编号"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="订单时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="recipient"
                        label="收货人">
                </el-table-column>
                <el-table-column
                        prop="totalPrice"
                        label="金额"
                        width="80">
                </el-table-column>
                <el-table-column
                        label="操作">
                  <template slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-view"
                            @click="orderDetailsBtn(scope.row)"
                    >详情</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            @click="delOrder(scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="待收货" name="fourth">
              <el-table
                      :data="orderTable"
                      style="width: 100%">
                <el-table-column
                        prop="orderNumber"
                        label="订单编号"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="订单时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="recipient"
                        label="收货人">
                </el-table-column>
                <el-table-column
                        prop="totalPrice"
                        label="金额"
                        width="80">
                </el-table-column>
                <el-table-column
                        label="操作">
                  <template slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-view"
                            @click="orderDetailsBtn(scope.row)"
                    >详情</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            @click="delOrder(scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="已完成" name="5">
              <el-table
                      :data="orderTable"
                      style="width: 100%">
                <el-table-column
                        prop="orderNumber"
                        label="订单编号"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="订单时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="recipient"
                        label="收货人">
                </el-table-column>
                <el-table-column
                        prop="totalPrice"
                        label="金额"
                        width="80">
                </el-table-column>
                <el-table-column
                        label="操作">
                  <template slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-view"
                            @click="orderDetailsBtn(scope.row)"
                    >详情</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            @click="delOrder(scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="待评价" name="6">
              <el-table
                      :data="orderTable"
                      style="width: 100%">
                <el-table-column
                        prop="orderNumber"
                        label="订单编号"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="订单时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="recipient"
                        label="收货人">
                </el-table-column>
                <el-table-column
                        prop="totalPrice"
                        label="金额"
                        width="80">
                </el-table-column>
                <el-table-column
                        label="操作">
                  <template slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-view"
                            @click="orderDetailsBtn(scope.row)"
                    >详情</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            @click="delOrder(scope.row)"
                    >删除</el-button>
                    <el-button
                            size="mini"
                            type="warning"
                            icon="el-icon-edit"
                            @click="toComment(scope.row)"
                    >评价</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="已关闭" name="7">
              <el-table
                      :data="orderTable"
                      style="width: 100%">
                <el-table-column
                        prop="orderNumber"
                        label="订单编号"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="订单时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="recipient"
                        label="收货人">
                </el-table-column>
                <el-table-column
                        prop="totalPrice"
                        label="金额"
                        width="80">
                </el-table-column>
                <el-table-column
                        label="操作">
                  <template slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-view"
                            @click="orderDetailsBtn(scope.row)"
                    >详情</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            @click="delOrder(scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 安全中心 -->
        <div id="options4" :class="[index==4?'show_div':'hidden_div']">
          <h2>修改密码</h2>
            <el-form
                    :model="pwdForm"
                    ref="pwdForm"
                    :rules="pwdRules"
                    label-width="80px"
            >
              <el-form-item label="原密码" prop="password">
                <el-input type="password" v-model="pwdForm.password" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" v-model="pwdForm.newPassword" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="updatePwd">确 定</el-button>
            </div>
        </div>

      </div>
    </div>

    <!-- 修改收货地址的弹框 -->
    <el-dialog
            :close-on-click-modal="false"
            title="修改收货地址"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
      <el-form ref="address" :model="address" label-width="80px"
               :rules="addressRule"
      >
        <el-form-item label="收货人" prop="name">
          <el-input v-model="address.name"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="address.tel"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="address.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateAddr">修 改</el-button>
  </span>
    </el-dialog>

    <!-- 修改头像弹框 -->
    <el-dialog
            :close-on-click-modal="false"
            title="修改头像"
            :visible.sync="editImgVisible"
            width="40%"
            :before-close="updateImgHandler">
      <div style="width: 100%;height: 300px">
        <div style="width: 50%;float: left;height: 100%;">
          <!-- 选择头像按钮 -->
          <el-upload
                  style="margin: 50px 50px;"
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :auto-upload="false"
                  accept="image/jpeg,image/jpg,image/png"
                  :on-change="changeHandler"
                  >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div style="float: left;width: 50%;float: left;height: 100%">
            <!-- 展示旧头像 -->
            <el-image style="margin: 50px 50px;" :src="user.imgUrl"></el-image>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editImgVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateImgBtn">确 定</el-button>
  </span>
    </el-dialog>

    <!-- 修改绑定手机号 -->
    <el-dialog
            title="修改手机号"
            :visible.sync="editTelVisible"
            width="30%"
            :before-close="editTelVisibleClose"
            :close-on-click-modal="false">
      <div>
        <el-form :model="userInfo" :rules="editTelRule" ref="userInfo">
          <el-form-item label="验证邮箱:">
            <p>{{userInfo.email}}</p>
          </el-form-item>
          <el-form-item>
            <el-input v-model="userInfo.code" style="width: 30%"></el-input>
            <el-button @click="getVerifyCode(1)" v-if="countFlag">获取验证码</el-button>
            <el-button v-else>剩余{{countNum}}</el-button>
          </el-form-item>
          <el-form-item label="手机号" prop="tel">
            <el-input v-model="userInfo.tel" style="width: 50%"></el-input>
          </el-form-item>
          <div>{{telMsg}}</div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editTelVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateTel">确 定</el-button>
  </span>
    </el-dialog>


    <!-- 修改绑定的邮箱 -->
    <el-dialog
            title="修改邮箱"
            :visible.sync="editEmailVisible"
            width="30%"
            :before-close="editTelVisibleClose"
            :close-on-click-modal="false">
      <div>
        <el-form :model="userInfo" :rules="editEmailRules" ref="userInfo">
          <el-form-item label="验证邮箱:">
            <p>{{userInfo.email}}</p>
          </el-form-item>
          <el-form-item prop="">
            <el-input v-model="userInfo.code" style="width: 30%"></el-input>
            <el-button @click="getVerifyCode(2)" v-if="countFlag">获取验证码</el-button>
            <el-button v-else>剩余{{countNum}}</el-button>
          </el-form-item>
          <el-form-item label="邮箱" prop="newEmail">
            <el-input v-model="userInfo.newEmail" style="width: 50%"></el-input>
          </el-form-item>
          <div>{{emailMsg}}</div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editEmailVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateEmail">确 定</el-button>
  </span>
    </el-dialog>


    <!-- 查看订单详情弹框 -->
    <el-dialog
            title="订单详情"
            :visible.sync="orderDetailsVisible"
            width="50%"
            v-if="orderDetailsVisible"
            :close-on-click-modal="false"
    >
      <div>
        <el-descriptions title="收货信息">
          <el-label>订单编号:</el-label>
          <el-descriptions-item label="订单编号">{{orderDetails.orderNumber}}</el-descriptions-item><br/>
          <el-label>收货人:</el-label>
          <el-descriptions-item label="收货人">{{orderDetails.recipient}}</el-descriptions-item><br/>
          <el-label>手机号:</el-label>
          <el-descriptions-item label="手机号">{{orderDetails.tel}}</el-descriptions-item><br/>
          <el-label>地址:</el-label>
          <el-descriptions-item label="地址">{{orderDetails.address}}</el-descriptions-item><br/>
          <el-label>备注:</el-label>
          <el-descriptions-item label="备注">{{orderDetails.remark}}</el-descriptions-item><br/>
          <el-label>订单时间:</el-label>
          <el-descriptions-item label="订单时间">{{orderDetails.createTime}}</el-descriptions-item><br/>
        </el-descriptions>
        <el-table
                :data="productList"
                style="width: 100%"
                show-summary
        >
          <el-table-column
                  prop="name"
                  label="商品名称"
                  width="180">
          </el-table-column>
          <el-table-column
                  label="商品图片"
                  width="180">
            <template slot-scope="scope">
              <el-image
                      style="width: 100px; height: 100px"
                      :src="scope.row.url"
                      :fit="fit"></el-image>
            </template>
          </el-table-column>
          <el-table-column
                  prop="price"
                  label="商品单价"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="number"
                  label="商品数量">
          </el-table-column>
          <el-table-column
                  prop="totalPrice"
                  label="小计">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="orderDetailsVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 充值弹框 -->
    <el-dialog
            title="充 值"
            :visible.sync="rechargeVisible"
            width="30%"
            v-if="rechargeVisible"
            :close-on-click-modal="false"
    >
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="金 额">
            <el-input-number v-model="num" :min="1" :max="1000000" label="金额"></el-input-number>
          </el-form-item>
        </el-form>
        <div style="margin-left: 150px">
          <div style="width: 200px;height:100px;border-radius: 10px" @click="payWay = 1" :class="{pay_div:payWay==1}">
            <el-image
                    src="https://2109-taobei.oss-cn-guangzhou.aliyuncs.com/images/2022/03/04/1646394481225.png"
                    style="width: 200px;height:100px"
            ></el-image>
          </div>
          <div style="width: 200px;height:100px;border-radius: 10px;margin-top: 10px" @click="payWay = 2" :class="{pay_div:payWay==2}">
            <el-image
                    style="width: 200px;height:100px;"
                    src="https://2109-taobei.oss-cn-guangzhou.aliyuncs.com/images/2022/03/04/1646394489328.png"
            ></el-image>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="rechargeBtn">充 值</el-button>
      </span>
    </el-dialog>

  </div>

</div>



<script type="text/javascript">

  const vm = new Vue({
      el: '#app',
      data: {
          pwdForm: {
              password: '',
              newPassword: ''
          },
          pwdRules: {
              self: this,
              password: [
                  { required: true, message: "请输入原密码", trigger: "blur" },
                  {
                      validator: function (rule,value,callback) {
                          //获取存储在本地的对象
                          let user = JSON.parse(window.sessionStorage.getItem("user"));
                          if (user.password == value){
                              //密码验证正确
                              callback();
                          }else{
                              //密码不争取
                              callback(new Error("旧密码不正确"));
                          }
                      },
                      message: "原密码不正确",
                      trigger: "blur" }
              ],
              newPassword: [
                  { required: true, message: "请输入新密码", trigger: "blur" },
              ]
          },
          telMsg: '',
          newAddress: {
            name: '',
            tel: '',
            address: ''
          },
          addressRule: {
              name: [
                  {required: true, message: "收货人不能为空", trigger: "blur"},
                  {
                      pattern: /^.{1,20}$/,
                      message: "请输入1-20个字符",
                      trigger: "blur"
                  }
              ],
              tel: [
                  {required: true, message: "昵称不能为空", trigger: "blur"},
                  {
                      pattern: /^1[34578]\d{9}$/,
                      message: "请输入正确手机号",
                      trigger: "blur"
                  }
              ],
              address: [
                  {required: true, message: "收货地址不能为空", trigger: "blur"},
                  {
                      pattern: /^.{1,50}$/,
                      message: "请输入1-50个字符",
                      trigger: "blur"
                  }
              ]
          },
          payWay: 1,
          num: 1,
          rechargeVisible: false,
          usernameRule: {
              username: [
                  {required: true, message: "昵称不能为空", trigger: "blur"},
                  {
                      pattern: /^.{1,20}$/,
                      message: "请输入1-20个字符",
                      trigger: "blur"
                  }
              ]
          },
          imageFile: {},
          imageUrl: '',
          viewProductType: {},
          showFlag: 0,
          cartNumber: 0,
          orderDetailsVisible: false,
          allAddress: [], //所有地址数组
          info: '',       //个人信息
          loading: false,
          dialogVisible: false,
          address: {},    //编辑地址
          formRule: {
              name: [{required: true, message: '请输入收货人姓名', trigger: 'blur'}],
              tel: [{required: true, message: '请输入电话', trigger: 'blur'}],
              address: [{required: true, message: '请输入地址', trigger: 'blur'}]
          },
          index: 0,
          nav: ['收货地址','基本资料','优惠券','订单管理','安全中心'],
          editImgVisible: false,
          userInfo: {
              sex: '',
              username: '',
              email: '',
              tel: '',
              code: '',
              newEmail: ''
          },
          discounts: [],
          fit: 'contain',
          orderTable: [],
          activeName: 'first',
          discountActive: 'first',
          orderActive: 'first',
          editUserRule: {
              username: [{required: true, message: '请输入昵称', trigger: 'blur'}],
              tel: [{required: true, message: '请输入电话', trigger: 'blur'}],
              address: [{required: true, message: '请输入地址', trigger: 'blur'}]
          },
          editTelVisible: false,
          countNum: 180, // 倒计时秒数
          countFlag: true,
          editTelRule: {
               tel: [
                   {required: true, message: '请输入手机号', trigger: 'blur'},
                   { validator:function(rule,value,callback){
                           if(/^1[34578]\d{9}$/.test(value) == false){
                               callback(new Error("请输入正确的手机号"));
                           }
                           let self = this;
                           //发送请求查询数据库中是否已经存在新手机号
                           $.ajax({
                               url: '/taobei_web/user/checkNewTel',
                               type: 'post',
                               dataType: 'json',
                               data: {
                                   tel: value
                               },
                               success(data) {
                                   if(data.status == 500){
                                       //存在
                                       callback(new Error(data.msg));
                                   }else{
                                       callback();
                                   }
                               }
                           })
                       }, trigger: 'blur'
                   }
               ]
          },
          //修改邮箱时对邮箱进行校验
          editEmailRules: {
              newEmail: [
                  {required: true, message: '请输入邮箱', trigger: 'blur'},
                  { validator:function(rule,value,callback){
                          if(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value) == false){
                              callback(new Error("请输入正确的邮箱"));
                          }else{
                              callback();
                          }
                      }, trigger: 'blur'
                  }
              ]
          },
          productList: [],
          orderDetails: {},
          editEmailVisible: false,
          emailMsg: ''
      },
      methods: {
          cartBtn() {
              //先判断是否已经登录，如果没登录，显示弹框让用户登录
              if (JSON.parse(window.sessionStorage.getItem("user")) == null){
                  //未登录
                  this.loginVisible =  true;
              }else{
                  //登录了就跳转到购物车页面
                  location.href = "./cart.html"
              }
          },
          toComment(item){
            //跳转到商品评价页面
            //   location.href = "./evaluateOrder.html?id="+item.id
              let self = this;
              //通过ajax请求保存订单ID
              $.ajax({
                  url: '/taobei_web/order/saveOrderId',
                  type: 'post',
                  dataType: 'json',
                  data: {
                      id: item.id
                  },
                  success(data) {
                      if (data.status == 200){
                          location.href = "./comment.html"
                      }
                  }
              })
          },
          updatePwd() {
            //先对表单进行校验
            this.$refs['pwdForm'].validate(valid => {
                if (valid){
                    let self = this;
                    $.ajax({
                        url: '/taobei_web/user/updatePwd',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            pwd: self.pwdForm.newPassword
                        },
                        success(data){
                            if (data.status == 200){
                                //修改成功，跳转到商城首页
                                window.sessionStorage.removeItem("user");
                                location.href = "./userIndex4.html"
                            }
                        }
                    })
                }
            })
          },
          rechargeBtn() {
              //根据选择支付方式显示收款码
              if (this.payWay == 1){
                  //支付宝支付

              }else{
                  //微信支付

              }
              let self = this;
              //修改用户余额
              $.ajax({
                  url: '/taobei_web/user/updateAccount',
                  type: 'post',
                  dataType: 'json',
                  data: {
                      money: self.num
                  },
                  success(data) {
                      if (data.status == 200){
                          //充值成功
                          //更新本地对象信息
                          window.sessionStorage.removeItem("user");
                          window.sessionStorage.setItem("user",JSON.stringify(data.data));
                          self.rechargeVisible = false
                          self.$message({
                              message: '充值成功',
                              type: 'success'
                          });
                          location.reload()
                      }
                  }
              })
          },
          submitForm() {
            //修改个人昵称和性别
            this.$refs['userInfo'].validate(valid => {
                if (valid){
                    //表单校验通过，向后端发起修改请求
                    let self = this;
                    $.ajax({
                        url: '/taobei_web/user/update',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            username: self.userInfo.username,
                            sex: self.userInfo.sex
                        },
                        success(data) {
                            if (data.status==200){
                                //修改成功，刷新本地存储的用户信息
                                window.sessionStorage.removeItem("user")
                                window.sessionStorage.setItem("user",JSON.stringify(data.data))
                                //重新加载
                                location.reload()
                            }
                        }
                    })
                }
            })
          },
          toInfo() {
              //刷新个人中心
              location.reload()
          },
          logout() {
              //清除本地存储的用户信息
              window.sessionStorage.removeItem("user")
              //重新初始化购物车商品数量
              this.cartNumber = 0
              //发请求让服务器清除session中保存的用户信息
              $.ajax({
                  url: '/taobei_web/user/logout',
                  type: 'get',
                  dataType: 'json',
                  success(data) {
                      if (data.status == 200){
                          //重新回到首页
                          location.href = "./userIndex4.html"
                      }
                  }
              })
          },
          changeHandler(file,fileList) {
              let flag = this.beforeUpload(file);
              //如果为false说明文件格式、大小不符合,把加入到fileList中的文件剔除掉
              if (flag == false){
                  //不符合条件提示用户
                  this.$message({
                      message: '头像格式不符合要求',
                      type: 'warning'
                  });
              }else{
                  //上传成功后显示
                  this.imageUrl = URL.createObjectURL(file.raw);
                  console.log(file)
                  this.imageFile = file
              }
          },
          updateImgBtn() {
            //修改用户头像函数
            //先判断是否上传了头像
            if (this.imageUrl == ''){
                //没上传 ，提示用户上传
                this.$message({
                    message: '请选择头像上传',
                    type: 'warning'
                });
            }else {
                let self = this;
                let formData = new FormData();
                formData.append("file",this.imageFile.raw)
                //上传了，向后端发起请求修改头像
                $.ajax({
                    url: '/taobei_web/user/updateImg',
                    dataType: 'json',
                    type: 'post',
                    data: formData,
                    contentType : false,
                    processData: false,
                    success(data) {
                        if (data.status == 200){
                            //刷新本地存储的用户信息
                            window.sessionStorage.removeItem("user");
                            window.sessionStorage.setItem("user",JSON.stringify(data.data))
                            //对话框消失
                            self.editImgVisible = false
                            self.$message({
                                message: data.msg,
                                type: 'success'
                            });
                            //重新加载页面
                            location.reload()
                        }else{
                            self.$message.error(data.msg);
                        }
                    }
                })
            }
          },
          beforeUpload(file) {
              const isJPG = file.raw.type === 'image/jpeg';
              const isPNG = file.raw.type === 'image/png';
              console.log(isJPG)
              const isLt5M = file.size / 1024 / 1024 < 5;
              if (!isJPG && !isPNG) {
                  this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
              }
              if (!isLt5M) {
                  this.$message.error('上传图片大小不能超过 5MB!');
              }
              return (isJPG || isPNG) && isLt5M;
          },
          updateImgHandler(done) {
              done()
          },
          getProductListByTypeId(item) {
              //先设置展示指定类型的所有商品
              this.showFlag = 1
              console.log(item)
              let self = this;
              //向后端发送请求
              $.ajax({
                  url: '/taobei_web/pro/getProductListByTypeId',
                  type: 'get',
                  dataType: 'json',
                  data: {
                      id: item.id
                  },
                  success(data) {
                      self.viewProductType = data.data
                  }
              })
          },
          updateEmail() {
            this.$refs['userInfo'].validate(valid => {
                if (valid){
                    //符合表单校验规则，可以进行修改
                    let self = this;
                    $.ajax({
                        url: '/taobei_web/user/updateEmail',
                        dataType: 'json',
                        type: 'post',
                        data: {
                            code: self.userInfo.code,
                            email: self.userInfo.newEmail
                        },
                        success(data) {
                            if (data.status == 200){
                                //修改成功，重新登录
                                window.sessionStorage.removeItem("user")
                                location.href = "./userIndex.html"
                            }else{
                                self.emailMsg = data.msg
                            }
                        }
                    })
                }
            })
          },
          delOrder(item){
              let self = this
              console.log(item)
              $.ajax({
                  url: '/taobei_web/order/userDelOrderByOrderId',
                  type: 'post',
                  dataType: 'json',
                  data: {
                      id: item.id
                  },
                  success(data) {
                      alert("删除成功")
                      self.initOrderList()
                  }
              })
          },
          orderDetailsBtn(item) {
              this.orderDetailsVisible=true
              //根据订单ID查询订单商品详情
              let self = this;
              this.orderDetails = item
              $.ajax({
                  url: '/taobei_web/order/selectOrderDetailsByOrderId',
                  type: 'get',
                  dataType: 'json',
                  data: {
                      orderId: item.id
                  },
                  success(data) {
                      if (data.status == 200){
                          self.productList = data.data
                      }
                  }
              })
              console.log(self.productList)
          },
          addAddress() {
              this.$refs['newAddress'].validate(valid => {
                  if (valid){
                      //表单校验通过
                      let self = this;
                      $.ajax({
                          url: '/taobei_web/address/addAddr',
                          type: 'post',
                          data: self.newAddress,
                          dataType: 'json',
                          success(data) {
                              self.$message({
                                  message: data.msg,
                                  type: 'success'
                              });
                              if (data.status == 200) {
                                  //添加成功，需要刷新收货地址列表
                                  debugger;
                                  self.initAddress()
                              }
                          }
                      })
                  }
              })
          },
          initAddress() {
              this.loading = true
              let self = this;
              $.ajax({
                  url: '/taobei_web/address/getAllAddr',
                  type: 'get',
                  dataType: 'json',
                  success(data) {
                      self.allAddress = data.data
                  }
              })
              this.loading = false
          },
          delAddr(item) {
            this.loading = false
            let self = this;
            $.ajax({
                url: '/taobei_web/address/delAddr',
                type: 'post',
                data: {
                  id: item.id
                },
                dataType: 'json',
                success(data) {
                  self.$message({
                      message: data.msg,
                      type: 'success'
                  });
                  if (data.status == 200){
                      self.initAddress()
                  }
                }
            })
            this.loading = true
          },
          setDefault(item) {
              //设置默认收货地址
              let self = this
              $.ajax({
                  url: '/taobei_web/address/updateAddrDef',
                  type: 'post',
                  dataType: 'json',
                  data: {
                      id: item.id
                  },
                  success(data) {
                      self.$message({
                          message: data.msg,
                          type: 'success'
                      });
                      if (data.status == 200){
                          self.initAddress()
                      }
                  }
              })
          },
          showAddr(item){
              this.address = item
              this.dialogVisible = true
          },
          updateAddr() {
              this.$refs['address'].validate(valid => {
                  if(valid){
                      let self = this;
                      $.ajax({
                          url: '/taobei_web/address/updateAddr',
                          type: 'post',
                          dataType: 'json',
                          data: self.address,
                          success(data) {
                              self.$message({
                                  message: data.msg,
                                  type: 'success'
                              });
                              if (data.status == 200){
                                  self.initAddress()
                              }
                              self.dialogVisible = false
                          }
                      })
                  }
              })
          },
          setTab(item) {
              this.index = item
              let self = this
              //根据点击的不同选项去刷新数据
              if (item == 0){
                  //刷新收货地址
                  this.initAddress();
              }else if (item == 1){
                  //刷新基本资料

              }else if (item == 2){
                  //刷新优惠券信息
                  this.initDiscount();
              }else if(item == 3){
                  //更新订单信息
                  this.initOrderList();
              }
          },
          getNotIsUse() {
              //获取用户未尚未使用的优惠券
              let self = this;
              $.ajax({
                  url: '/taobei_web/disc/getNotUse',
                  type: 'get',
                  dataType: 'json',
                  success(data) {
                      self.discounts = data.data
                  }
              })
          },
          getUse() {
              //获取用户已经使用的优惠券
              let self = this;
              $.ajax({
                  url: '/taobei_web/disc/getUse',
                  type: 'get',
                  dataType: 'json',
                  success(data) {
                      self.discounts = data.data
                  }
              })
          },
          getOverdue() {
              //获取用户过期的优惠券
              let self = this;
              $.ajax({
                  url: '/taobei_web/disc/getOverdue',
                  type: 'get',
                  dataType: 'json',
                  success(data) {
                      self.discounts = data.data
                  }
              })
          },
          handleClose(done) {
            done()
          },
          editProfile() {
              //设置修改头像的弹框可见
              this.editImgVisible = true
          },
          initDiscount() {
              //判断上一次停留在那个位置
              if (this.discountActive == 'first'){
                  //获取未被使用的优惠券
                  this.getNotIsUse();
              }else if (this.discountActive == 'second'){
                  //获取已经使用的优惠券
                  this.getUse();
              }else if(this.discountActive == 'third'){
                  //获取已经过期的优惠券
                  this.getOverdue();
              }
          },
          handleClick(tab, event) {
              console.log(tab, event);
          },
          disHandleClick(tab,event){
            if (tab.index == 1){
                //获取已经使用的优惠券
                this.getUse();

            }else if(tab.index == 0){
                //获取未使用的优惠券
                this.getNotIsUse();
            }else{
                //获取已经过期的优惠券
                this.getOverdue()
            }
          },
          orderHandlerClick(tab,event) {
              if (tab.index == 0){
                  //获取所有订单
                  this.getAllOrder()
              }else if(tab.index == 1){
                  //获取待付款状态的订单
                  this.getOrderByStatus(2)
              }else if (tab.index == 2){
                  //获取已付款待发货状态订单
                  this.getOrderByStatus(3)
              }else if(tab.index == 3 ){
                  //获取待收货状态的订单
                  this.getOrderByStatus(4)
              }else if (tab.index == 4){
                  //获取已完成的订单
                  this.getOrderByStatus(6)
              }else if(tab.index == 5) {
                  //待评价
                  this.getOrderByStatus(5)
              }else{
                  //超时关闭
                  this.getOrderByStatus(1)
              }
          },
          initOrderList() {
              //判断上一次停留的位置
              if (this.orderActive == 'first'){
                  //获取所有订单
                  this.getAllOrder();
              }else if (this.orderActive == 'second'){
                  //获取待付款状态的订单
                  this.getOrderByStatus(2)
              }else if(this.orderActive == 'third'){
                  //获取已付款待发货状态订单
                  this.getOrderByStatus(3)
              }else if (this.orderActive == 'fourth'){
                  //获取待收货状态的订单
                  this.getOrderByStatus(4)
              }else if (this.orderActive == '5'){
                  //获取已完成订单
                  this.getOrderByStatus(6)
              }else if (this.orderActive == '6'){
                  //待评价
                  this.getOrderByStatus(5)
              }else{
                  //超时关闭
                  this.getOrderByStatus(1)
              }
          },
          getAllOrder() {
              //获取当前用户所有订单
              let self = this;
              $.ajax({
                  url: '/taobei_web/order/selectOrderListByUserId',
                  type: 'get',
                  dataType: 'json',
                  success(data) {
                      self.orderTable = data.data
                  }
              })
          },
          getOrderByStatus(status){
              let self = this;
              $.ajax({
                  url: '/taobei_web/order/getOrderByStatus',
                  data: {
                      status: status
                  },
                  dataType: 'json',
                  type: 'get',
                  success(data) {
                      if (data.status == 200){
                          self.orderTable = data.data
                      }
                  }
              })
          },
          editTelVisibleClose() {
              this.editEmailVisible = false
          },
          updateTel() {
              this.$refs['userInfo'].validate(valid => {
                  if (valid){
                      let self = this;
                      //修改手机号
                      $.ajax({
                          url: '/taobei_web/user/updateTel',
                          type: 'post',
                          data: {
                              tel: self.userInfo.tel,
                              code: self.userInfo.code
                          },
                          dataType: 'json',
                          success(data) {
                              if (data.status == 200){
                                  //让用户回到首页重新登录
                                  window.sessionStorage.removeItem("user")
                                  location.href = "./userIndex3.html"
                              }else{
                                  self.telMsg = data.msg
                              }
                          }
                      })
                  }
              })
          },
          monitor () {//监听关闭页面之后重新打开是否改继续倒计时
              let LocalDelay = this.getLocalDelay()
              let timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000)
              if (timeLine > LocalDelay.delay) {
                  console.warn('倒计时过期')
              } else {
                  this.countFlag = false
                  this.countNum = LocalDelay.delay - timeLine
                  let timer = setInterval(() => {
                      if (this.countNum > 1) {
                          this.countNum--
                          this.setLocalDelay(this.countNum)  //设置每一次还需倒计时
                      } else {
                          clearInterval(timer)
                          this.countFlag = true
                      }
                  }, 1000)
              }
          },
          countDown () {
              if (this.countFlag) {
                  this.countFlag = false
                  this.countNum = 120
                  let timer = setInterval(() => {
                      if (this.countNum > 1) {
                          this.countNum--
                          this.setLocalDelay(this.countNum)
                      } else {
                          clearInterval(timer)
                          this.countFlag = true
                      }
                  }, 1000)
              } else {
                  return false
              }
          },
          setLocalDelay (delay) {
              // location.href作为页面的唯一标识，可能一个项目中会有多个验证码。
              localStorage.setItem('delay_' + location.href, delay)
              localStorage.setItem('time_' + location.href, new Date().getTime())
          },
          getLocalDelay () {
              let LocalDelay = {
                  delay: localStorage.getItem('delay_' + location.href),
                  time : localStorage.getItem('time_' + location.href)
              }
              return LocalDelay
          },
          getVerifyCode (index) {
              //判断是发送修改手机的验证码还是修改邮箱的验证码
              let url = '';
              if (index == 1){
                  //修改手机的
                  url = '/taobei_web/user/editTelCheckEmailCode';
              }else if (index ==2){
                  //修改邮箱的
                  url = '/taobei_web/user/editEmailCheckCode';
              }
              let self = this;
              //发起发送邮箱请求
              $.ajax({
                  url: url,
                  type: 'get',
                  dataType: 'json',
                  success(data) {
                      console.log(data)
                      if (self.countFlag) {
                          self.countDown() // 倒计时函数
                      }
                  }
              })
          },
          initCartNumber() {
              let self = this;
              $.ajax({
                  url:"/taobei_web/cart/getCartSum",
                  type:"get",
                  dataType:"json",
                  success:function (data) {
                      if (data.status == 200) {
                          self.cartNumber = data.data.nums
                      }
                  }
              })
          },
      },
      computed: {
          user() {
              return JSON.parse(window.sessionStorage.getItem("user"))
          },
          viewProductList() {
              return JSON.parse(window.sessionStorage.getItem("productList"))
          }
      },
      mounted() {
          this.initAddress();
          this.userInfo = JSON.parse(window.sessionStorage.getItem("user"));
          this.initCartNumber();
      }
  })
</script>
</body>
</html>